
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <link href="../css/font-awesome.css" rel="stylesheet">
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body style="background-color: #e2e2e2;">
<div id="app" class="container" v-cloak>
    <div class="row text-center" style="padding-top: 100px;">
        <div class="col-md-12">
            <h2>
                欢迎登陆后台管理系统
            </h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel-body">
                <form>
                    <hr/>
                    <br/>
                    <!-- 用户名输入 -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-tag"></i>
                        </span>
                        <input type="text" class="form-control" v-model="user.name" placeholder="用户名"/>
                    </div>

                    <!-- 密码输入 -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" class="form-control" v-model="user.password" placeholder="密码"/>
                    </div>

                    <!-- 登录按钮 -->
                    <div style="text-align: center;">
                        <a href="javascript:void(0)" @click="login" class="btn btn-primary">登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



//第39集代码补充,请剪切到我给出的图片中的位置
<div class="form-group">
    <label class="checkbox-inline">

    </label>
    <span class="pull-right">
        <a href="javascript:void(0)" @click="reset" >忘记密码</a>
    </span>
</div>


<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            user:{
                name: "",
                password: "",
            }
        },
        // 当页面创建，执行这个函数
        created: function () {

        },
        methods: { // 声明方法的地方
            // 登录
            login(){
                // 没有输入即点击登录，调用login()，data的user.name获取绑定的用户名input中的数据为空
                if(!this.user.name){
                    alert("请输入用户名");
                    return;
                }
                // 输入密码
                if(!this.user.password){
                    alert("请输入密码");
                    return;
                }
                axios.post("/login", this.user).then(res => {
                    if(res.data.code === '0'){
                        // 本地浏览器缓存更新
                        localStorage.setItem('user', JSON.stringify(res.data.data));
                        window.location = '/front/index.html';
                    }else{
                        alert(res.data.code + " " + res.data.msg); // 注意.data（见Result代码）
                    }
                });
            },
            //下面代码放method中
            //重置密码
            reset() {
                if (!this.user.name) {
                    alert("请输入用户名");
                    return;
                }
                if (!this.user.level) {
                    alert("请选择角色");
                    return;
                }
                axios.post('/resetPassword', this.user).then(res => {
                    if (res.data.code === '0') {
                        alert("重置密码成功，密码重置为: 123456")
                    } else {
                        alert(res.data.msg);
                    }
                });
            }
        }
    });
</script>



</body>
</html>